<template>
  <el-dialog
    ref="dialog"
    :title="title"
    :visible.sync="visible"
    :append-to-body="true"
    :close-on-click-modal="false"
    width="900px"
    @close="close"
  >
    <div class="top-btn-wrap">
      <el-button type="primary" @click="selectPro()"
        >选择产品</el-button
      >
    </div>
    <div class="listTable">
      <el-table :data="tableData" stripe >
        <el-table-column
          v-for="(item, index) in headList"
          :key="index"
          :prop="item.prop"
          :label="item.label"
          :min-width="item.width"
          show-overflow-tooltip
        />
        <el-table-column label="操作" width="120">
          <template slot-scope="scope">
            
          </template>
        </el-table-column>
      </el-table>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="close" type="primary">保存</el-button>
      <el-button @click.native="close">取消</el-button>
    </span>

    <Relatedproducts ref="Relatedproducts" :action="createAction" @save-success="saveSuccess" />
    
  </el-dialog>
</template>
<script>
import Relatedproducts from '@/components/Relatedproducts/Relatedproducts.vue'

export default {
  components: { Relatedproducts },
  props: {
    props: Object,
    members: Array,
    isCreate: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      visible: false,
      title: "添加交叉销售产品团队成员",
      headList:[
        { prop: "realname", width: "120", label: "产品名称" },
        { prop: "deptName", width: "100", label: "产品类型" },
        { prop: "groupRole", width: "100", label: "价格(元)" },
        { prop: "expiresTime", width: "120", label: "分成依据类型" },
        { prop: "expiresTime", width: "120", label: "分成人员比例" },
      ],
      tableData:[],
      createAction:{
        
      },
    };
  },
  mounted(){
    // this.$nextTick(()=>{
    //   const fatherDom = document.querySelector("body");
    //     if(fatherDom.append){
    //       fatherDom.append(this.$el);
    //     }else{
    //       fatherDom.appendChild(this.$el);
    //     }
    // })
  },
  methods: {
    saveSuccess(){

    },
    show() {
      this.visible = true;
    },
    close() {
      this.visible = false;
    },
    selectPro(){
      this.$refs.Relatedproducts.showRelationFun();
    },
  },
};
</script>
<style lang="scss" scoped>
  .top-btn-wrap {
    text-align: right;
    margin-bottom: 16px;
    margin-right: 32px;
  }
  .listTable{
    padding: 0 32px;
  }
  .dialog-footer{
    padding-right: 12px;
  }
</style>